{% extends 'ahp/base.html' %}
{% block content %}

    <h4>试验评估</h4>
    <p>拖动滑块位置定义不同指标之间的相对重要程度。负值表示左边指标更重要，否则表示右边指标更重要。</p>
    <div class="scale"><h6>不同数值的含义</h6>
   <div class="center-container"> <ul>
    <li>0 or 1 - 差不多 </li>
    <li>3 - 稍微重要一点 </li>
    <li>5 - 重要一点 </li>
    <li>7 - 明显重要一点 </li>
    <li>9 - 绝对重要一点 </li>
    </ul></div></div>
    <form method="POST" action="/crit_model_details/{{ pk }}/solver/"> {% csrf_token %}
        <div class="criteria">
            <p>{{ criteria.crit1 }}</p>
            <div class ="output">
                <input type="range" id="ageInputId01" class="slider" name="01" min="-9" max="9"
                       step="1" oninput="ageOutputId01.value = ageInputId01.value">
                <output id="ageOutputId01">0</output>
            </div>

            <p>{{ criteria.crit2 }}</p>
            <p>{{ criteria.crit1 }}</p>
            <div class="output"><input type="range" id="ageInputId02" class="slider" name="02" min="-9" max="9" step="1"
                        value="0" oninput="ageOutputId02.value = ageInputId02.value">
                <output id="ageOutputId02">0</output>
            </div>
            <p>{{ criteria.crit3 }}</p>
            <p>{{ criteria.crit1 }}</p>
            <div class="output"><input type="range" id="ageInputId03" class="slider" name="03" min="-9" max="9" step="1"
                        value="0" oninput="ageOutputId03.value = ageInputId03.value">
                <output id="ageOutputId03">0</output>
            </div>
            <p>{{ criteria.crit4 }}</p>
            <p>{{ criteria.crit2 }}</p>
            <div class="output"><input type="range" id="ageInputId12" class="slider" name="12" min="-9" max="9" step="1"
                        value="0" oninput="ageOutputId12.value = ageInputId12.value">
                <output id="ageOutputId12">0</output>
            </div>
            <p>{{ criteria.crit3 }}</p>
            <p>{{ criteria.crit2 }}</p>
            <div class="output"><input type="range" id="ageInputId13" class="slider" name="13" min="-9" max="9" step="1"
                        value="0" oninput="ageOutputId13.value = ageInputId13.value">
                <output id="ageOutputId13">0</output>
            </div>
            <p>{{ criteria.crit4 }}</p>
            <p>{{ criteria.crit3 }} </p>
            <div class="output"><input type="range" id="ageInputId23" class="slider" name="23" min="-9" max="9" step="1"
                        value="0" oninput="ageOutputId23.value = ageInputId23.value">
                <output id="ageOutputId23">0</output>
            </div>
            <p>{{ criteria.crit4 }}</p>

        </div>
        {#        <div>#}
        {#            {% for element in elements %}#}
        {#                {% for field, value in element.get_fields %}#}
        {#                    {% if field == "image" %}#}
        {#                        {{ field }} : <img src="/media/{{ value }}" alt="{{ value }}">#}
        {#                    {% else %}#}
        {#                        {{ field }} : {{ value }}#}
        {#                    {% endif %}#}
        {##}
        {#                {% endfor %}#}
        {#            {% endfor %}#}
        {#        </div>#}
        <h4>场景比较</h4>
        <p>拖动滑块位置定义不同场景在特定指标下的好坏程度</p>
    <div class="scale"><h6>不同数值的含义</h6>
   <div class="center-container"> <ul>
    <li>0 or 1 - 差不多 </li>
    <li>3 - 稍微好一点 </li>
    <li>5 - 好一点 </li>
    <li>7 - 明显好一点 </li>
    <li>9 - 绝对好一点 </li>
    </ul></div></div>
        <div class="elements">
            {% for field, value in criteria.get_fields %}

                <div class="center">{{ value }}</div>

                {% for pair in pairs %}
                    <div class="left">
                        {{ pair.0.0 }}:
                        {% if value == "image" %}
                            {% if forloop.parentloop.counter0 == 0 %}
                                <img class="image-solve" src="/media/{{ pair.0.1.0 }}" alt="{{ value }}">{% endif %}
                            {% if forloop.parentloop.counter0 == 1 %}
                                <img class="image-solve" src="/media/{{ pair.0.1.1 }}" alt="{{ value }}">{% endif %}
                            {% if forloop.parentloop.counter0 == 2 %}
                                <img class="image-solve" src="/media/{{ pair.0.1.2 }}" alt="{{ value }}">{% endif %}
                            {% if forloop.parentloop.counter0 == 3 %}
                                <img class="image-solve" src="/media/{{ pair.0.1.3 }}" alt="{{ value }}">{% endif %}
                        {% else %}
                            {% if forloop.parentloop.counter0 == 0 %}{{ pair.0.1.0 }}{% endif %}
                            {% if forloop.parentloop.counter0 == 1 %}{{ pair.0.1.1 }}{% endif %}
                            {% if forloop.parentloop.counter0 == 2 %}{{ pair.0.1.2 }}{% endif %}
                            {% if forloop.parentloop.counter0 == 3 %}{{ pair.0.1.3 }}{% endif %}
                        {% endif %}
                    </div>

                    <div class="slider">


                        <div class ="output"><input type="range" class="slider" id="{{ field }}{{ forloop.counter }}"
                                    name="{{ field }}#{{ pair.0.0 }}#{{ pair.1.0 }}" min="-9"
                                    max="9" step="1"
                                    value="0" oninput="o{{ field }}{{ forloop.counter }}.value =
                                {{ field }}{{ forloop.counter }}.value">

                            <output id="o{{ field }}{{ forloop.counter }}">0</output>
                        </div>


                    </div>
                    <div class="right">
                        {{ pair.1.0 }}:                     {% if value == "image" %}
                        {% if forloop.parentloop.counter0 == 0 %}
                            <img class="image-solve" src="/media/{{ pair.1.1.0 }}" alt="{{ value }}">
                        {% endif %}
                        {% if forloop.parentloop.counter0 == 1 %}
                            <img class="image-solve" src="/media/{{ pair.1.1.1 }}" alt="{{ value }}">
                        {% endif %}
                        {% if forloop.parentloop.counter0 == 2 %}
                            <img class="image-solve" src="/media/{{ pair.1.1.2 }}" alt="{{ value }}">
                        {% endif %}
                        {% if forloop.parentloop.counter0 == 3 %}
                            <img class="image-solve" src="/media/{{ pair.1.1.3 }}" alt="{{ value }}">
                        {% endif %}
                    {% else %}
                        {% if forloop.parentloop.counter0 == 0 %}{{ pair.1.1.0 }}{% endif %}
                        {% if forloop.parentloop.counter0 == 1 %}{{ pair.1.1.1 }}{% endif %}
                        {% if forloop.parentloop.counter0 == 2 %}{{ pair.1.1.2 }}{% endif %}
                        {% if forloop.parentloop.counter0 == 3 %}{{ pair.1.1.3 }}{% endif %}
                    {% endif %}
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
        <div class="center-container">
            <button type="submit">保存</button>
        </div>
    </form>

{% endblock %}